<template>
	<el-card shadow="hover">
		<template v-slot:header>
			单位新闻
			<div style="float: right;display: inline-flex;color: #FFFFFF;">
				<sc-icon style="cursor: pointer;width: 18px; margin-right: 10px;" @click="reLoadNews" title="刷新"><el-icon-refresh-right/></sc-icon>
				<sc-icon style="cursor: pointer;width: 18px;" @click="getMoreNews" title="全部"><el-icon-more-filled/></sc-icon>
			</div>

		</template>
		<div style="height: 210px;">
			<el-row :gutter="1">
				<el-col :lg="8">
					<el-carousel height="210px">
						<el-carousel-item v-for="item in newsPicList" :key="item.newsId">
							<el-image class="image" :src="item.imgUrl" style="height: 100%;width: 100%" fit="cover"></el-image>
						</el-carousel-item>
					</el-carousel>
				</el-col>
				<el-col :lg="16">
					<el-table :data="newsList" style="width: 100%" :show-header="false" @row-click="showNewsStatus" class="customer-table">
						<el-table-column prop="newsTitle" :show-overflow-tooltip="true">
							<template #default="scope">
								<div v-if="scope.row.readStatus=='false'" style="position: absolute;"><sc-icon-new/></div>
									{{scope.row.newsTitle}}
							</template>
						</el-table-column>
						<el-table-column prop="createTime" width="180" align="center">
							<template #default="scope">
									{{scope.row.createTime}}
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</div>
	</el-card>
	<newsDetails v-if="dialog.detailsSave" ref="detailsDialog" @closed="dialog.detailsSave=false"></newsDetails>
</template>

<script>
import newsDetails from '@/views/info/news/newsDetails'
export default {
	components: {
		newsDetails
	},
	data() {
		return {
			dialog: {
				detailsSave:false
			},
			newsPicList:[],
			newsList: [],
			timer:null
		}
	},
	created() {
		clearInterval(this.timer)
		this.timer = null
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.getMyPicNewsListForDesk();
		this.setTimer();
	},
	methods: {
		reLoadNews()
		{
			this.getMyPicNewsListForDesk();
		},
		getMoreNews(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/info/news/mynews',
				})
			})
		},
		async getMyPicNewsListForDesk() {
			var res = await this.$API.info.news.getMyPicNewsListForDesk.get();
			if (res.code == 200) {
				this.newsList = res.data;
				let picArr=[];
				this.newsList.forEach(item=>{
					if(item.imgUrl!=undefined&&item.imgUrl!='')
					{
						let json = {
							newsId:item.newsId,
							imgUrl:item.imgUrl,
							newsTitle:item.newsTitle
						}
						picArr.push(json);
					}
				})
				this.newsPicList = picArr;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		showNewsStatus(row, event, column) {
			this.dialog.detailsSave = true
			this.$nextTick(() => {
				this.$refs.detailsDialog.open("read").setData(row)
			})
		},
		setTimer() {
			if(this.timer == null) {
				this.timer = setInterval( () => {
					this.getMyPicNewsListForDesk();
				}, this.$TOOL.data.get("MSG_TIME"))
			}
		}
	}
}
</script>
<style scoped>
:deep(.el-card__header){
	background: rgba(64, 158, 255, 0.6);
	color: white;
	padding: 10px 20px 10px 20px;
}
:deep(.el-table tr){
	cursor: pointer;
}
.customer-table th {
	border: none;
}

.customer-table td, .customer-table th.is-leaf {
	border: none;
}

.el-table--border, .el-table--group {
	border: none;
}

.customer-table thead tr th.is-leaf {
	border: 1px solid #EBEEF5;
	border-right: none;
}

.customer-table thead tr th:nth-last-of-type(2) {
	border-right: 1px solid #EBEEF5;
}

.el-table--border::after, .el-table--group::after {
	width: 0;
}

.customer-table::before {
	width: 0;
}

.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
	width: 0;
}

.el-table--border th.gutter:last-of-type {
	border: 1px solid #EBEEF5;
	border-left: none;
}
</style>
